<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Document</title>
  <!-- 引入样式文件 -->
  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css" />

  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  <script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
  <script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
  <style>
    @font-face {
      font-family: "iconfont";
      /* Project id 4877315 */
      /* Color fonts */
      src:
        url('https://at.alicdn.com/t/c/font_4877315_6slw1ynmryt.woff2?t=1743415606963') format('woff2'),
        url('https://at.alicdn.com/t/c/font_4877315_6slw1ynmryt.woff?t=1743415606963') format('woff'),
        url('https://at.alicdn.com/t/c/font_4877315_6slw1ynmryt.ttf?t=1743415606963') format('truetype');
    }

    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .icon-yejing:before {
      content: "\e600";
    }

    .icon-shuijue:before {
      content: "\e66b";
    }

    .icon-yeban:before {
      content: "\e680";
    }

    .icon-baiban:before {
      content: "\e8a4";
    }

    .yeban {
      font-size: 14px;
      color: #D4A5A5;
      font-weight: bold;
    }

    .baiban {
      font-size: 14px;
      color: #88B04B;
      font-weight: bold;
    }

    .xiuxi {
      font-size: 14px;
      color: #FFA07A;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div id="app">
    <van-calendar v-model:show="show" title="宝贝上班日历" color="#D7C4B6" @select="clickDate" :poppable="false"
      :show-confirm="false" :formatter="formatter">
      <template #bottom-info="day">
        <div v-if="day.bottomInfo == '夜班'" class="yeban">
          <!-- {{ day.bottomInfo }} -->
          <i class="iconfont icon-yeban"></i>
        </div>
        <div v-if="day.bottomInfo == '白班'" class="baiban">
          <!-- {{ day.bottomInfo }} -->
          <i class="iconfont icon-baiban"></i>
        </div>
        <div v-if="day.bottomInfo == '休息'" class="xiuxi">
          <!-- {{ day.bottomInfo }} -->
          <i class="iconfont icon-shuijue"></i>
        </div>
      </template>
      <!-- <template #bottom-info="day">
        <div class="bottom-info">
          {{ day.bottomInfo }}
        </div>
      </template> -->
    </van-calendar>
  </div>
  <script>
    function getShiftType(targetDate) {

      const baseDate = new Date('2025-03-31'); // 基准日期，假设是夜班

      const diffTime = targetDate - baseDate;

      const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));

      const mod = ((diffDays % 3) + 3) % 3; // 处理负数的情况

      switch (mod) {

        case 0: return '夜班';

        case 1: return '休息';

        case 2: return '白班';

        default: return '未知';

      }

    }
    const { createApp, ref } = Vue
    // 在 #app 标签下渲染一个按钮组件
    const app = createApp({
      setup() {
        const message = ref('Hello vue!')
        const show = ref(true)
        const formatter = (day) => {
          const month = (day.date.getMonth() + 1).toString().padStart(2, '0');
          const date = day.date.getDate().toString().padStart(2, '0');
          const year = day.date.getFullYear();

          // if (month === 5) {
          //   if (date === 1) {
          //     day.topInfo = '劳动节';
          //   } else if (date === 4) {
          //     day.topInfo = '青年节';
          //   } else if (date === 11) {
          //     day.text = '今天';
          //   }
          // }

          // if (day.type === 'start') {
          //   day.bottomInfo = '入住';
          // } else if (day.type === 'end') {
          //   day.bottomInfo = '离店';
          // }

          day.bottomInfo = getShiftType(new Date(`${year}-${month}-${date}`));



          return day;
        };
        const clickDate = (Date2) => {
          const month = (Date2.getMonth() + 1).toString().padStart(2, '0');
          const date = Date2.getDate().toString().padStart(2, '0');
          const year = Date2.getFullYear();
          console.log(getShiftType(new Date(`${year}-${month}-${date}`)));
          let workTyoe = getShiftType(new Date(`${year}-${month}-${date}`));
          if (workTyoe === '夜班') {
            vant.showToast(
              {
                message: '宝贝今天夜班哦，白天要补觉觉～',
                wordBreak: 'break-all',
                duration: 2000,
              }
            )
          } else if (workTyoe === '白班') {
            vant.showToast(
              {
                message: '宝贝今天白班哦，上班要好好吃饭，多喝水～',
                wordBreak: 'break-all',
                duration: 2000,
              }
            )
          } else if (workTyoe === '休息') {
            vant.showToast(
              {
                message: '宝贝今天休息哦，记得想我哦～',
                wordBreak: 'break-all',
                duration: 2000,
              }
            )
          } else {

          }

        }
        return {
          message,
          show,
          formatter,
          clickDate,
        }
      }
    });
    app.use(vant);
    // 通过 CDN 引入时不会自动注册 Lazyload 组件
    // 可以通过下面的方式手动注册
    app.use(vant.Lazyload);
    app.mount('#app');
  </script>
</body>

</html>